<template>
  <div id="index-query-finished-orders">
    <section
      v-for="(item, index) in orders.arr"
      :key="index"
      @click="go(item.status, item.id)">
      <header>
        <span>{{ '保单号：' + item.apply_policy_no }}</span>
        <span>已完成</span>
      </header>
      <article>
        <div
          class="left"
          :class="{
                   'ha': item.company_id === '1',
                 'astp': item.company_id === '2',
                   'dh': item.company_id === '3',
                   'rb': item.company_id === '4',
                  'bbw': item.company_id === '5'
                  }"></div>
        <div class="middle">
          <p>{{ item.plate_num || '未上牌' }}</p>
          <p>{{ item.name }}</p>
        </div>
        <div class="right">
          <p>{{ item.actual_price + '元' }}</p>
          <p>{{ packages[item.package_id - 1] }}</p>
        </div>
      </article>
      <footer class="normal">
        <section>
          <p>{{ item.start_time }}</p>
          <p>起保日期</p>
        </section>
        <section>
          <p>{{ item.end_time }}</p>
          <p>终保日期</p>
        </section>
        <section>
          <p>{{ item.insurance_period + '天' }}</p>
          <p>保险期限</p>
        </section>
      </footer>
    </section>

    <empty-message v-show="noMore" message="已无更多"></empty-message>
  </div>
</template>

<script>
  import EmptyMessage from '../comp/empty-message';

  export default {
    name: "index-query-finished-orders",
    components: {
      EmptyMessage
    },
    data() {
      return {
        orders: [],
        noMore: false
      }
    },
    methods: {
      go(status, order_id) {

        this.$router.push({
          name: 'MineOrderDetail',
          params: {
            order_id: order_id,
            status: status
          }
        });
      },
      packages: [
        '经济型',
        '全面型',
        '豪华型',
        '自定义'
      ],
    },
    created() {
      this.orders = this.$tool.qs.parse(sessionStorage.getItem('orders'));
      this.noMore = this.orders.num === '0';
    }
  }
</script>

<style scoped lang="scss">

  #index-query-finished-orders {
    > section {

      $this-public-padding: 0 1rem;

      margin-bottom: 1rem;
      background: $white;
      border-radius: 1.8rem;
      box-shadow: $public-box-shadow;

      > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 3.5rem;
        padding: $this-public-padding;
        border-bottom: 1px solid #f5f5f5;

        > span:first-of-type {
          font-size: 1.2rem;
          color: #333;

          &.tip {
            color: #f00;
          }
        }

        > span:last-of-type {
          font-size: 1.5rem;
          color: #0196ff;
        }
      }

      > article {

        $p-mb: 1.2rem;

        display: flex;
        align-items: center;
        height: 8rem;
        padding: $this-public-padding;
        font-size: 1.5rem;
        border-bottom: 1px solid #f5f5f5;

        > .left {
          width: 70px;
          height: 54px;
          margin: 0 1.8rem 0 .8rem;

          &.tips {
            background: url("../../assets/images/public/not-chose-yet.png") no-repeat center / $size-as-parent auto;
          }

          &.ha {
            background: url("../../assets/images/public/companies-2.png") no-repeat (center top) / $size-as-parent auto;
          }

          &.astp {
            background: url("../../assets/images/public/companies-2.png") no-repeat (center -97px) / $size-as-parent auto;
          }

          &.dh {
            background: url("../../assets/images/public/companies-2.png") no-repeat (center -204px) / $size-as-parent auto;
          }

          &.rb {
            background: url("../../assets/images/public/companies-2.png") no-repeat (center -301px) / $size-as-parent auto;
          }

          &.bbw {
            background: url("../../assets/images/public/companies-2.png") no-repeat (center -379px) / $size-as-parent auto;
          }
        }

        > .middle {
          flex: 1;

          > p:first-of-type {
            margin-bottom: $p-mb;
            font-weight: bold;
            color: #0196ff;
          }

          > p:last-of-type {
            color: #333;
          }
        }

        > .right {
          text-align: right;

          > p:first-of-type {
            margin-bottom: $p-mb;
            color: #f00;
          }

          > p:last-of-type {
            color: #999;
          }
        }
      }

      > footer {
        display: flex;
        align-items: center;
        padding: $this-public-padding;

        &.normal {
          height: 6.2rem;
          justify-content: space-around;

          > section {
            text-align: center;

            > p:first-of-type {
              margin-bottom: 1.2rem;
            }

            > p:last-of-type {
              font-size: 1.5rem;
              color: #999;
            }
          }
        }

        &.about-code {
          height: 4rem;
          justify-content: space-between;

          > p {
            font-size: 1.2rem;
            color: #f00;
          }

          > button {
            width: 8rem;
            height: 2.5rem;
            font-size: 1.5rem;
            color: $white;
            border-radius: .6rem;
            background: #0097ff;

            &[disabled] {
              background: #bbb;
            }
          }
        }
      }
    }
  }
</style>
